<template>
	<view class="shopping">
		<view class="header">
			<view class="header_view">
				<image src="@/static/images/c1.png"></image>
				<input type="text" placeholder="搜索关键词" v-model="name">
				<view class="submit" @click="submit">搜索</view>
			</view>
		</view>
		<scroll-view scroll-y class="scroll_view">
			<uv-swiper :list="rotation" keyName="img" radius="0" height="300" imgMode="scaleToFill"></uv-swiper>
			<view class="content">
				<view class="notice">
					<image src="@/static/images/s7.png" class="icon"></image>
					<uv-notice-bar :icon="false" :text="notice_list" step color="#999" bgColor="#fff"></uv-notice-bar>
					<image src="@/static/images/r4.png" class="r_icon"></image>
				</view>
				<view class="colony" @click="router('/pages/shopping/club')">
					<image src="@/static/images/n1.png"></image>
				</view>
				<view class="card">
					<view class="item" @click="router('/pages/club/block')">
						<image src="@/static/images/n2.png"></image>
					</view>
					<view class="item">
						<view class="key">签到</view>
						<view class="cell">
							<view>签到领积分</view>
							<image src="@/static/images/c3.png"></image>
						</view>
					</view>
				</view>
				<view class="tabs">
					<view class="item" v-for="item in tabs" @click="router(`/pages/club/sell?id=${item.id}`)">
						<image :src="item.thumbnail"></image>
						<text>{{item.name}}</text>
					</view>
					<view class="item" @click="router('/pages/club/sell')">
						<image src="@/static/images/c11.png"></image>
						<text>直播专区</text>
					</view>
				</view>
				<view class="title">
					<view class="title_view">为您精选</view>
				</view>
				<view class="list">
					<view class="item" v-for="item in list" @click="router(`/pages/club/goods_deta?id=${item.id}`)">
						<image :src="item.img" class="cover"></image>
						<view class="item_view">
							<view class="name">{{item.name}}</view>
							<view class="synopsis">{{item.synopsis}}</view>
							<view class="price">
								<view class="unit">￥</view>
								<view class="value">{{item.price}}</view>
							</view>
							<view class="integral" v-if="item.integral">赠送<text>{{item.integral}}</text>积分</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script setup>
	import {
		product
	} from "@/request/api";
	import {
		onShow,
		onHide
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue";
	import useLogin from "@/hooks/useLogin.js";
	import useBase from "@/hooks/useBase.js";
	const {
		wxLogin
	} = useLogin();
	const {
		router
	} = useBase();
	const text = "尚未完善，给您的体验带来不便敏请谅解..."
	const rotation = ref([]),
		tabs = ref([]),
		list = ref([]);

	const name = ref(""),
		notice_list = ref([]);
	const getList = async () => {
		let res = await product({
			name: name.value
		});
		rotation.value = res.rotation;
		tabs.value = res.class;
		list.value = res.product;

		let arr = [];
		res.new.forEach(item => arr.push(item.title));
		notice_list.value = arr;
	};
	const submit = () => getList();

	onShow(async () => {
		await wxLogin()
		await getList();
	});
</script>

<style scoped lang="scss">
	.shopping {
		height: calc(100vh - var(--window-top) - var(--window-bottom));
		background-color: $background;
		overflow: hidden;

		.left_slot {
			image {
				width: 43rpx;
				height: 36rpx;
			}
		}

		.header {
			width: 100%;
			height: $navBarHeight;
			padding: 0 50rpx;
			box-sizing: border-box;
			background: #CA1C1D;
			display: flex;
			align-items: center;

			.header_view {
				width: 650rpx;
				height: 68rpx;
				border-radius: 34rpx;
				padding: 0 28rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				input {
					flex: 1;
					color: #999999;
					font-size: 26rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
				}

				.submit {
					color: #CA1C1D;
					font-size: 26rpx;
				}
			}
		}

		.scroll_view {
			height: calc(100vh - var(--window-top) - var(--window-bottom) - #{$navBarHeight});

			.content {
				padding: 20rpx 25rpx 0;
				box-sizing: border-box;

				.notice {
					height: 60rpx;
					border-radius: 16rpx;
					padding: 0 12rpx 0 30rpx;
					box-sizing: border-box;
					background: #FFFFFF;
					display: flex;
					align-items: center;

					.icon {
						width: 50rpx;
						height: 50rpx;
					}

					.r_icon {
						width: 24rpx;
						height: 24rpx;
					}
				}

				.colony {
					margin: 30rpx 0;

					image {
						width: 100%;
						height: 160rpx;
					}
				}

				.card {
					display: flex;
					justify-content: space-between;

					.item {
						width: 335rpx;
						height: 130rpx;

						image {
							width: 335rpx;
							height: 130rpx;
						}

						&:last-child {
							padding: 20rpx;
							box-sizing: border-box;
							background: url(@/static/images/n3.png) no-repeat;
							background-size: 100% 100%;

							.key {
								color: #FFFFFF;
								font-size: 28rpx;
								font-weight: bold;
							}

							.cell {
								padding-top: 18rpx;
								box-sizing: border-box;
								display: flex;
								align-items: center;

								view {
									color: #EEEEEE;
									font-size: 20rpx;
									font-weight: 400;
								}

								image {
									width: 20rpx;
									height: 20rpx;
								}
							}
						}
					}
				}

				.tabs {
					width: 100%;
					border-radius: 20rpx;
					margin-top: 25rpx;
					padding: 0 35rpx;
					box-sizing: border-box;
					background: #FFFFFF;
					display: flex;
					flex-wrap: wrap;

					.item {
						width: 25%;
						padding: 24rpx 0;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						image {
							width: 80rpx;
							height: 80rpx;
						}

						text {
							color: #333333;
							font-size: 24rpx;
							padding-top: 12rpx;
							box-sizing: border-box;
						}
					}
				}

				.title {
					height: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.title_view {
						width: 263rpx;
						color: #333333;
						font-size: 34rpx;
						font-weight: bold;

						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;

						&::after {
							content: "";
							width: 100%;
							height: 12rpx;
							background: url(@/static/images/c12.png) no-repeat;
							background-size: 100% 12rpx;
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
						}
					}
				}

				.list {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.item {
						width: 330rpx;
						border-radius: 20rpx;
						margin-bottom: 20rpx;
						box-shadow: 0rpx 0rpx 7rpx 0rpx #EEEEEE;
						background: #FFFFFF;

						.cover {
							width: 100%;
							height: 330rpx;
						}

						.item_view {
							height: 180rpx;
							padding: 24rpx 20rpx 30rpx;
							box-sizing: border-box;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.name {
								color: #222222;
								font-size: 26rpx;
								font-weight: bold;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}

							.synopsis {
								color: #999999;
								font-size: 24rpx;
							}

							.price {
								display: flex;
								align-items: flex-end;

								.unit {
									color: #CA1C1D;
									font-size: 26rpx;
									font-weight: bold;
								}

								.value {
									color: #CA1C1D;
									font-size: 30rpx;
									font-weight: bold;
								}
							}

							.integral {
								display: flex;
								align-items: center;
								color: #CA1C1D;
								font-size: 20rpx;

								text {
									font-size: 22rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>